<template>
  <div style="padding:0 15px;background-color: #f0f2f5;">
    <!--列表-->
    <el-row :gutter="12" style="padding: 10px 0;">
      <el-col v-for="rack of racks" :key="rack" :span="8">
        <el-card shadow="hover" style="padding: 20px 0;margin: 10px 0;">
          <div style="text-align:center">
            <el-row>
              <el-col :span="6">
                <img src="@/assets/racks/rack.png" alt="" style="width:7rem">
              </el-col>
              <el-col :span="18">
                <h2>机框{{ rack.rackId }}</h2>
                <h5>异常单板: 0</h5>
                <el-row>
                  <el-col :span="12">
                    <h5 v-if="rack.power === 1">电源: <span style="color:#AF3123">开启</span></h5>
                    <h5 v-else>电源: <span style="color:green">关闭</span></h5>
                    <h5>位置: {{ rack.location }}</h5>
                  </el-col>
                  <el-col :span="12">
                    <h5>型号: {{ rack.model }}</h5>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
          <div style="text-align:center;margin:1rem; 0">
            <el-row>
              <el-col :span="12">
                <el-button type="info" plain>详情</el-button>
              </el-col>
              <el-col :span="12">
                <el-button type="info" plain>修改</el-button>
              </el-col>
            </el-row>
          </div>
          <h5 style="text-align:center">资源单板</h5>
          <el-row :gutter="12" style="margin-top:20px;text-align:center">
            <el-col v-for="board of rack.boards" :key="board" :span="6" style="margin-top:5px;">
              <el-card v-if="board.status" shadow="hover" :body-style="{ padding: '0px' }" style="color:#AF3123;background-color:#FFE5E2;">
                <h5>{{ board.no }}</h5>
                <h5>{{ board.mod }}</h5>
              </el-card>
              <el-card v-else :body-style="{ padding: '0px' }" shadow="hover" style="color:green;background-color:rgb(214, 245, 214)">
                <h5>{{ board.no }}</h5>
                <h5>{{ board.mod }}</h5>
              </el-card>
            </el-col>
          </el-row>
          <h5 style="text-align:center">时钟主控</h5>
          <el-row :gutter="12" style="margin-top:20px;text-align:center">
            <el-col v-for="co of rack.clock" :key="co" :span="6" style="margin-top:5px;">
              <el-card v-if=" co.status " shadow="hover" :body-style="{ padding: '0px' }" style="color:#AF3123;background-color:#FFE5E2">
                <h5>{{ co.no }}</h5>
                <h5>CLK</h5>
              </el-card>
              <el-card v-else :body-style="{ padding: '0px' }" shadow="hover" style="color:green;background-color:rgb(214, 245, 214)">
                <h5>{{ co.no }}</h5>
                <h5>CLK</h5>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  // components: { adminDashboard, editorDashboard },
  data() {
    return {
      racks: [
        {
          /* eslint-disable */
            rackId: 'M1',
            power: 1,
            model: 'xa',
            location: '上海',
            boards: [{
                id: 1,
                no: 1,
                mod: 'GX2800',
                status: true
              },
              {
                id: 2,
                no: 2,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 3,
                mod: 'VU9P',
                status: false
              },
              {
                id: 3,
                no: 4,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 5,
                mod: 'VU9P',
                status: false
              },
              {
                id: 3,
                no: 6,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 7,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 8,
                mod: 'VU9P',
                status: false
              },
              {
                id: 3,
                no: 9,
                mod: 'VU9P',
                status: false
              },
              {
                id: 3,
                no: 10,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 11,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 12,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 13,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 14,
                mod: 'GX2800',
                status: false
              },
              {
                id: 3,
                no: 15,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 16,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 17,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 18,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 19,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 20,
                mod: 'VU9P',
                status: true
              }
            ],
            clock: [{
                no: 21,
                status: true
              },
              {
                no: 22,
                status: false
              },
              {
                no: 23,
                status: true
              },
              {
                no: 24,
                status: true
              }
            ]
          },


          {
            rackId: 'M2',
            power: 0,
            model: 'xa',
            location: '上海',
            boards: [{
                id: 1,
                no: 1,
                mod: 'GX2800',
                status: true
              },
              {
                id: 2,
                no: 2,
                mod: 'GX2800',
                status: false
              },
              {
                id: 3,
                no: 3,
                mod: 'VU9P',
                status: false
              },
              {
                id: 3,
                no: 4,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 5,
                mod: 'VU9P',
                status: false
              },
              {
                id: 3,
                no: 6,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 7,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 8,
                mod: 'VU9P',
                status: false
              },
              {
                id: 3,
                no: 9,
                mod: 'VU9P',
                status: false
              },
              {
                id: 3,
                no: 10,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 11,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 12,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 13,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 14,
                mod: 'GX2800',
                status: false
              },
              {
                id: 3,
                no: 15,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 16,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 17,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 18,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 19,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 20,
                mod: 'VU9P',
                status: true
              }
            ],
            clock: [{
                no: 21,
                status: true
              },
              {
                no: 22,
                status: false
              },
              {
                no: 23,
                status: true
              },
              {
                no: 24,
                status: true
              }
            ]
          },


          {
            rackId: 'M3',
            power: 1,
            model: 'xa',
            location: '上海',
            boards: [{
                id: 1,
                no: 1,
                mod: 'GX2800',
                status: false
              },
              {
                id: 2,
                no: 2,
                mod: 'GX2800',
                status: false
              },
              {
                id: 3,
                no: 3,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 4,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 5,
                mod: 'VU9P',
                status: false
              },
              {
                id: 3,
                no: 6,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 7,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 8,
                mod: 'VU9P',
                status: false
              },
              {
                id: 3,
                no: 9,
                mod: 'VU9P',
                status: false
              },
              {
                id: 3,
                no: 10,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 11,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 12,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 13,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 14,
                mod: 'GX2800',
                status: false
              },
              {
                id: 3,
                no: 15,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 16,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 17,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 18,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 19,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 20,
                mod: 'VU9P',
                status: true
              }
            ],
            clock: [{
                no: 21,
                status: true
              },
              {
                no: 22,
                status: false
              },
              {
                no: 23,
                status: true
              },
              {
                no: 24,
                status: true
              }
            ]
          },


          {
            rackId: 'M4',
            power: 1,
            model: 'xa',
            location: '上海',
            boards: [{
                id: 1,
                no: 1,
                mod: 'GX2800',
                status: true
              },
              {
                id: 2,
                no: 2,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 3,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 4,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 5,
                mod: 'VU9P',
                status: false
              },
              {
                id: 3,
                no: 6,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 7,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 8,
                mod: 'VU9P',
                status: false
              },
              {
                id: 3,
                no: 9,
                mod: 'VU9P',
                status: false
              },
              {
                id: 3,
                no: 10,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 11,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 12,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 13,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 14,
                mod: 'GX2800',
                status: false
              },
              {
                id: 3,
                no: 15,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 16,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 17,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 18,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 19,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 20,
                mod: 'VU9P',
                status: true
              }
            ],
            clock: [{
                no: 21,
                status: true
              },
              {
                no: 22,
                status: false
              },
              {
                no: 23,
                status: true
              },
              {
                no: 24,
                status: true
              }
            ]
          },


          {
            rackId: 'M1',
            power: 1,
            model: 'xa',
            location: '上海',
            boards: [{
                id: 1,
                no: 1,
                mod: 'GX2800',
                status: true
              },
              {
                id: 2,
                no: 2,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 3,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 4,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 5,
                mod: 'VU9P',
                status: false
              },
              {
                id: 3,
                no: 6,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 7,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 8,
                mod: 'VU9P',
                status: false
              },
              {
                id: 3,
                no: 9,
                mod: 'VU9P',
                status: false
              },
              {
                id: 3,
                no: 10,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 11,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 12,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 13,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 14,
                mod: 'GX2800',
                status: false
              },
              {
                id: 3,
                no: 15,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 16,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 17,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 18,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 19,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 20,
                mod: 'VU9P',
                status: true
              }
            ],
            clock: [{
                no: 21,
                status: true
              },
              {
                no: 22,
                status: false
              },
              {
                no: 23,
                status: true
              },
              {
                no: 24,
                status: true
              }
            ]
          },


          {
            rackId: 'M1',
            power: 1,
            model: 'xa',
            location: '上海',
            boards: [{
                id: 1,
                no: 1,
                mod: 'GX2800',
                status: true
              },
              {
                id: 2,
                no: 2,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 3,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 4,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 5,
                mod: 'VU9P',
                status: false
              },
              {
                id: 3,
                no: 6,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 7,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 8,
                mod: 'VU9P',
                status: false
              },
              {
                id: 3,
                no: 9,
                mod: 'VU9P',
                status: false
              },
              {
                id: 3,
                no: 10,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 11,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 12,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 13,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 14,
                mod: 'GX2800',
                status: false
              },
              {
                id: 3,
                no: 15,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 16,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 17,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 18,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 19,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 20,
                mod: 'VU9P',
                status: true
              }
            ],
            clock: [{
                no: 21,
                status: true
              },
              {
                no: 22,
                status: false
              },
              {
                no: 23,
                status: true
              },
              {
                no: 24,
                status: true
              }
            ]
          },


          {
            rackId: 'M1',
            power: 1,
            model: 'xa',
            location: '上海',
            boards: [{
                id: 1,
                no: 1,
                mod: 'GX2800',
                status: true
              },
              {
                id: 2,
                no: 2,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 3,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 4,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 5,
                mod: 'VU9P',
                status: false
              },
              {
                id: 3,
                no: 6,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 7,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 8,
                mod: 'VU9P',
                status: false
              },
              {
                id: 3,
                no: 9,
                mod: 'VU9P',
                status: false
              },
              {
                id: 3,
                no: 10,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 11,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 12,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 13,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 14,
                mod: 'GX2800',
                status: false
              },
              {
                id: 3,
                no: 15,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 16,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 17,
                mod: 'VU9P',
                status: true
              },
              {
                id: 3,
                no: 18,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 19,
                mod: 'GX2800',
                status: true
              },
              {
                id: 3,
                no: 20,
                mod: 'VU9P',
                status: true
              }
            ],
            clock: [{
                no: 21,
                status: true
              },
              {
                no: 22,
                status: false
              },
              {
                no: 23,
                status: true
              },
              {
                no: 24,
                status: true
              }
            ]
          },




          {
            rackId: 'M7',
            power: 0,
            model: 'xa',
            location: '上海',
          }, {
            rackId: 'M8',
            power: 1,
            model: 'xa',
            location: '上海',
          }
      ]
    }
  },
  created() {
    console.log(this.racks)
  }
}
</script>

<style lang="scss" scoped \>
.racks {
}
